/* 基础样式重置 */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
     background-color: #f5f7fa;
     color: #333;
     line-height: 1.6;
     padding: 20px;
 }

 .form-container {
     max-width: 1200px;
     margin: 0 auto;
     background-color: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     animation: fadeIn 0.5s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 h1 {
     background-color: #2c6ecb;
     color: white;
     padding: 20px 30px;
     font-size: 24px;
     font-weight: 600;
     border-bottom: 1px solid #e0e0e0;
 }

 .form-content {
     padding: 30px;
 }

 .category-section {
     margin-bottom: 35px;
     border-radius: 8px;
     border: 1px solid #e5e7eb;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .category-section:hover {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 }

 .category-title {
     background-color: #f8f9fa;
     color: #2c6ecb;
     padding: 15px 20px;
     font-size: 22px;
     font-weight: 500;
     border-bottom: 1px solid #e5e7eb;
 }

 .form-group {
     padding: 5px 10px;
     border-bottom: 1px solid #f1f1f1;
     transition: background-color 0.2s ease;
 }

 .form-group:last-child {
     border-bottom: none;
 }

 .form-group:hover {
     background-color: #f9fafb;
 }

 label {
     display: block;
     margin-bottom: 8px;
     color: #4b5563;
     font-weight: 500;
     font-size: 14px;
 }

 input[type="text"],
 textarea,
 select {
     width: 100%;
     padding: 12px 15px;
     border: 1px solid #d1d5db;
     border-radius: 6px;
     font-size: 14px;
     transition: all 0.2s ease;
     background-color: #fff;
 }

 input[type="text"]:focus,
 textarea:focus,
 select:focus {
     outline: none;
     border-color: #2c6ecb;
     box-shadow: 0 0 0 3px rgba(44, 110, 203, 0.1);
 }

 input[type="text"]::placeholder,
 textarea::placeholder {
     color: #9ca3af;
 }

 textarea {
     min-height: 80px;
     resize: vertical;
 }

 .radio-group {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     padding: 5px 0;
 }

 /* 弹窗样式 */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
}

.no-changes-popup {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 400px;
    overflow: hidden;
}

.popup-header {
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.popup-icon {
    width: 30px;
    height: 30px;
    background-color: #ff4d4f;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.popup-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.popup-content {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 26px; /* 增大字体大小 */
}

.popup-footer {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

.popup-confirm-btn {
    padding: 8px 20px;
    background-color: #2c6ecb;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.popup-confirm-btn:hover {
    background-color: #1d5bbf;
}

/* 数组模式容器样式 */
 .array-container {
     margin: 15px 0;
     padding: 15px;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
 }

 .objects-container {
     margin-bottom: 15px;
 }

 .object-key {
     font-weight: bold;
     font-size: 16px;
     margin-bottom: 10px;
     color: #333;
     padding-bottom: 5px;
     border-bottom: 1px solid #e0e0e0;
 }

 .object-item {
     padding: 15px;
     margin-bottom: 10px;
     border: 1px solid #f0f0f0;
     border-radius: 4px;
     background-color: #f9f9f9;
 }

 .radio-item {
     display: flex;
     align-items: center;
     gap: 5px;
     cursor: pointer;
 }

 input[type="radio"] {
     width: auto;
     margin-right: 5px;
 }

 .image-upload-container {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 input[type="file"] {
     padding: 10px;
     border: 1px dashed #d1d5db;
     border-radius: 6px;
     background-color: #f9fafb;
     cursor: pointer;
     transition: all 0.2s ease;
 }

 input[type="file"]:hover {
     border-color: #2c6ecb;
     background-color: #f3f4f6;
 }

 .image-preview-container {
     width: 200px;
     height: 100px;
     border: 1px dashed #d1d5db;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-radius: 6px;
     background-color: #f9fafb;
 }

 .preview-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     transition: transform 0.2s ease;
 }

 .preview-image:hover {
     transform: scale(1.05);
 }

 .image-text-placeholder {
     color: #6b7280;
     font-size: 14px;
     text-align: center;
     padding: 10px;
 }

 .image-loading,
 .image-error {
     color: #6b7280;
     font-size: 14px;
 }

 .image-error {
     color: #ef4444;
 }

 button {
     padding: 12px 24px;
     background-color: #2c6ecb;
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 500;
     transition: all 0.2s ease;
     margin: 15px 20px 20px 20px;
 }

 button:hover {
     background-color: #2563eb;
     transform: translateY(-1px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 button:active {
     transform: translateY(0);
 }

 .save-status {
     margin: 0 20px 20px 20px;
     padding: 12px 15px;
     border-radius: 6px;
     font-size: 14px;
     font-weight: 500;
     display: none;
 }

 .success {
     background-color: #dcfce7;
     color: #166534;
     border: 1px solid #bbf7d0;
 }

 .error {
     background-color: #fee2e2;
     color: #b91c1c;
     border: 1px solid #fecaca;
 }

 /* 响应式设计 */
 @media (max-width: 768px) {
     .form-container {
         border-radius: 0;
         box-shadow: none;
     }

     h1 {
         padding: 15px 20px;
         font-size: 18px;
     }

     .form-content {
         padding: 15px;
     }

     .category-title {
         padding: 12px 15px;
         font-size: 16px;
     }

     .form-group {
         padding: 12px 15px;
     }

     button {

         margin: 15px 50px 20px 20px;
     }

     .image-preview-container {
         width: 100%;
     }
 }

 /* 滑动开关样式 */
 .toggle-switch {
     position: relative;
     display: inline-block;
     width: 50px;
     height: 24px;
     vertical-align: middle;
 }

 .toggle-switch input {
     opacity: 0;
     width: 0;
     height: 0;
 }

 .toggle-slider {
     position: absolute;
     cursor: pointer;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: #ccc;
     transition: .4s;
     border-radius: 24px;
     width: 50px;
 }

 .toggle-slider:before {
     position: absolute;
     content: "";
     height: 16px;
     width: 16px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: .4s;
     border-radius: 50%;
 }

 input:checked+.toggle-slider {
     background-color: #2c6ecb;
 }

 input:checked+.toggle-slider:before {
     transform: translateX(26px);
 }

 .toggle-container {
     display: flex;
     align-items: center;
     gap: 8px;
     /* 增加间距 */
     margin-top: 5px;
     /* 添加顶部外边距 */
     padding: 5px 0;
 }

 .toggle-labels {
     display: flex;
     justify-content: flex-start;
     width: 50px !important;
     font-size: 12px;
     color: #6b7280;
     margin-left: 5px;
 }

 /* 新增：修复label标签样式冲突 */
 .form-group {
     display: flex;
     flex-direction: column;
     margin-bottom: 15px;
 }

 .form-group label {
     margin-bottom: 5px;
     font-weight: bold;
 }

 .form-group input,
 .form-group select {
     width: 50%;
     box-sizing: border-box;
 }

 /* 数组表单控件样式 */
 .input-array-container {
     border: 1px solid #d1d5db;
     border-radius: 6px;
     padding: 15px;
     background-color: #f9fafb;
 }

 .array-items {
     margin-bottom: 10px;
 }

 .input-array-container {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 15px;
     align-items: center;
 }

 .array-item {
     display: inline-flex;
     align-items: center;
     margin: 5px 0;
 }

 .array-item input {
     width: auto;
     min-width: 120px;
     font-size: inherit;
     padding: 8px 10px;
     height: 34px;
     vertical-align: middle;
 }

 .array-item .remove-btn {
     background-color: #ff4d4f;
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     width: 26px;
     height: 26px;
     font-size: 14px;
     margin: 15px 10px 20px 20px;
     margin-left: 5px;
     padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
 }

 .add-array-item {
     margin-top: 5px;
     padding: 6px 12px;
     font-size: inherit;
 }

 .array-item:last-child {
     border-bottom: none;
     margin-bottom: 0;
     padding-bottom: 0;
 }

 .array-item select,
 .array-item input[type="text"] {
     flex: 1;
     min-width: 0;
 }

 .remove-btn {
     background-color: #ff4d4f;
     color: white;
     border: none;
     border-radius: 50%;
     cursor: pointer;
     padding: 5px 8px;
     font-size: 14px;
     margin-left: 5px;
     margin-top: 15px;
     transition: all 0.2s ease;
 }

 /* 添加响应式样式 */
 @media (max-width: 768px) {
     .array-item .remove-btn {
         padding: 4px 6px;
         font-size: 12px;
         width: 24px;
         height: 24px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
 }

 /* 响应式调整 */
 @media (min-width: 768px) {
     .form-group {
         flex-direction: row;
         align-items: center;
     }

     .form-group label {
         width: 100px;
         margin-right: 15px;
         text-align: center;
         margin-bottom: 0;
     }

     /* 修改后 */
     .form-group .toggle-container .toggle-labels label {
         width: 50px !important;
     }
    

     .form-group input,
     .form-group select {
         /* width: calc(100% - 115px); */
         width: calc(30% - 115px);
     }
 }

 .array-item .remove-btn:hover {
     background-color: #d9363e;
     transform: scale(1.05);
 }

 .add-btn {
     padding: 8px 15px;
     background-color: #2c6ecb;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 14px;
     margin: 0;
     margin-left: auto;
 }

 .add-btn:hover {
     background-color: #2563eb;
     transform: none;
     box-shadow: none;
 }

 .add-object-controls {
     display: flex;
     align-items: center;
     margin-top: 15px;
 }


 .object-name-input {
     min-width: 150px;
 }

 .nested-object-item {
     position: relative;
 }

 .remove-btn {
     /* 移除绝对定位，使用flex布局控制位置 */
     margin-left: auto;
     margin-top: 16px;
 }

 /* 移动端适配 */
 @media (max-width: 768px) {
     .remove-btn {
         margin-top: 0;
         padding: 3px 6px;
         font-size: 14px;
     }

     .nested-object-header {
         gap: 10px;
     }

     .nested-object-item {
         min-width: auto !important;
         padding: 8px;
     }
 }

 .nested-object-array-container {
     margin: 10px 0;
     padding: 10px;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
 }

 .nested-object-item {
     margin: 10px 0;
     padding: 10px;
     border: 1px solid #f0f0f0;
     border-radius: 4px;
 }

 .nested-object-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* margin-bottom: 10px;
     padding-bottom: 5px; */
     border-bottom: 1px solid #eee;
 }

 .nested-object-title {
     font-weight: bold;
     color: #666;
 }

 .nested-object-fields {
     padding-left: 15px;
 }

 .nested-object-field-group {
     margin: 8px 0;
     display: flex;
     align-items: center;
 }

 .nested-object-field-group label {
     width: 120px;
     margin-right: 10px;
 }

 .add-object-controls {
     margin-top: 10px;
 }

 .remove-obj-btn {
     padding: 4px 8px;
     background-color: #ff4d4f;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 12px;
 }

 .remove-obj-btn:hover {
     background-color: #ff7875;
 }

 .object-name-input {
     flex: 1;
     min-width: 120px;
     padding: 4px 8px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin-right: 10px;
     font-size: 14px;
 }

 .object-name-input:focus {
     outline: none;
     border-color: #66afe9;
     box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.25);
 }

 .nested-object-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* margin-bottom: 10px;
     padding-bottom: 5px; */
     border-bottom: 1px solid #eee;
 }

 /* 对象类型样式 */
 .object-field-container {
     border: 1px solid #ddd;
     border-radius: 6px;
     padding: 15px;
     margin-bottom: 15px;
     background-color: #f9f9f9;
 }

 .object-header {
     font-weight: bold;
     margin-bottom: 10px;
     padding-bottom: 5px;
     border-bottom: 1px solid #eee;
 }

 .object-content {
     margin-left: 15px;
 }

 .object-display {
     width: 100%;
     min-height: 100px;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 4px;
     background-color: #f9f9f9;
     font-family: monospace;
     white-space: pre-wrap;
     margin-bottom: 10px;
 }

 .object-array-container {
     width: 100%;
     box-sizing: border-box;
 }

 .object-items {
     width: 100%;
     box-sizing: border-box;
 }

 .object-item {
     width: 100% !important;
     box-sizing: border-box !important;
     min-width: 1080px !important;
 }
 

 /* 添加媒体查询适配移动设备 */
 @media (max-width: 768px) {
     .object-item {
         padding: 10px !important;
     }

     .nested-object-header {
         gap: 10px !important;
     }

     .object-array-container {
         padding: 5px !important;
     }

     /* 确保表格在小屏幕上可以水平滚动 */
     table {
         display: block;
         overflow-x: auto;
         white-space: nowrap;
     }
 }

 .edit-object-btn {
     padding: 6px 12px;
     background-color: #4285f4;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
 }

 #scroll-to-bottom {
     position: fixed;
     bottom: 20px;
     right: 20px;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: #3b82f6;
     color: white;
     border: none;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 99999999;
 }

 #scroll-to-bottom:hover {
     background-color: #2563eb;
     transform: translateY(-3px);
     box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
 }

 #scroll-to-bottom:active {
     transform: translateY(1px);
     box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
 }

 /* 为移动设备调整样式 */
 @media (max-width: 768px) {
     #scroll-to-bottom {
         padding: 0 !important;
         bottom: 15px !important;
         right: -15px !important;
         width: 22px !important;
         height: 22px !important;
         font-size: 10px !important;
     }
 }

 /* 图片上传容器样式 */
 .image-upload-container {
     margin: 15px 0;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 /* 自定义文件上传按钮 */
 .image-upload-btn {
     display: inline-block;
     padding: 10px 20px;
     background-color: #3b82f6;
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
     transition: all 0.3s ease;
     text-align: center;
     max-width: 200px;
 }

 .image-upload-btn:hover {
     background-color: #2563eb;
     transform: translateY(-2px);
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }

 .image-upload-btn:active {
     transform: translateY(0);
 }

 /* 隐藏原始文件输入 */
 .image-upload-input {
     display: none !important;
 }

 /* 图片预览容器 */
 .image-preview-container {
     border: 2px dashed #d1d5db;
     border-radius: 8px;
     padding: 20px;
     /* min-height: 150px; */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     background-color: #f9fafb;
     transition: all 0.3s ease;
 }

 .image-preview-container:hover {
     border-color: #93c5fd;
     background-color: #eff6ff;
 }

 /* 预览图片样式 */
 .preview-image {
     max-width: 100%;
     max-height: 300px;
     border-radius: 6px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }

 .preview-image:hover {
     transform: scale(1.02);
 }

 /* 加载和错误提示样式 */
 .image-loading,
 .image-error {
     padding: 20px;
     text-align: center;
     color: #6b7280;
 }

 .image-loading {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
 }

 /* 加载动画 */
 .loading-spinner {
     width: 24px;
     height: 24px;
     border: 3px solid #f3f4f6;
     border-top: 3px solid #3b82f6;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .image-text-placeholder {
     padding: 20px;
     color: #6b7280;
     text-align: center;
 }

 /* 拖拽上传提示 */
 .drag-over {
     border-color: #3b82f6;
     background-color: #dbeafe;
 }
 /* 添加到现有CSS文件中 */
.form-content {
    page-break-inside: avoid;
}

.form-group {
    page-break-inside: avoid;
    margin-bottom: 5px;
}

.section-end {
    page-break-after: always;
}

/* 确保表格不被分割 */
table {
    page-break-inside: avoid;
}

/* 🚨 紧急修复：强制显示所有图片容器 */
.image-item-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100px !important;
    height: 100px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    position: relative !important;
    margin-right: 10px !important;
    margin-bottom: 10px !important;
    background-color: #f9f9f9 !important;
    overflow: hidden !important;
    z-index: 1000 !important;
    float: left !important;
}

.image-item-container img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 图片上传容器确保可见 */
.image-upload-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 预览容器确保可见 */
.image-preview-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 确保输入框组不被分割 */
.input-group {
    page-break-inside: avoid;
}
.section-end {
    break-after: page;
    page-break-after: always; /* 兼容旧浏览器 */
    clear: both;
    margin: 10px 0;
}
.form-group {
    break-inside: avoid;
    page-break-inside: avoid; /* 兼容旧浏览器 */
}
.category-title {
    background-color: #f8f9fa;
    color: #2c6ecb;
    padding: 15px 20px;
    font-size: 22px;
    font-weight: 500;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer; /* 显示为可点击 */
}

.toggle-icon {
    float: right;
    margin-left: 10px;
    float: left;
    margin-right: 10px;
    font-weight: bold;
    font-size: 20px;
    color: #2c6ecb;
    transition: transform 0.3s ease;
}


.category-title:hover .toggle-icon {
    transform: scale(1.2); /* 悬停时略微放大 */
}

/* 可选：为展开状态添加不同样式 */
.category-title .toggle-icon.expanded {
    color: #1d5bbf; /* 展开时颜色更深 */
}

.category-content {
    transition: all 0.3s ease;
}
/* 默认图库按钮样式 */
.image-gallery-btn {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background-color: transparent;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/* 默认图库按钮样式 */
.image-gallery-btn {
    position: absolute;
    bottom: 5px;
    left: 5px;
    padding: 2px 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

/* 图库界面样式 */
.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999998;
}

.gallery-box {
    width: 80%;
    max-width: 600px;
    max-height: 80%;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    overflow-y: auto;
}

.gallery-title {
    margin-top: 0;
}

.local-upload-container {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px;
    cursor: pointer;
}

.local-upload-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 24px;
    margin-right: 10px;
}

.local-upload-text {
    color: #333;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.image-grid img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}
.key-value-pair input[type="text"] {
    width: fit-content !important;
    min-width: 60px !important;
}




/* 值输入容器样式 */
.key-value-pair > div:not(.remove-key-btn) {
    width: auto !important;
    min-width: 0 !important; /* 允许收缩 */
}

/* 特殊处理：确保在inline模式下正确显示 */
.key-value-pair[style*="min-width: fit-content"] {
    min-width: 0 !important; /* 覆盖JavaScript设置 */
}


/* 增强inline模式下obj类型字段的布局 */
.object-field-container[layout-mode="inline"] .pairs-list {
    gap: 5px !important; /* 减小元素之间的间距 */
    justify-content: flex-start !important; /* 确保左对齐 */
}

/* 调整inline模式下的键值对容器宽度 */
.object-field-container[layout-mode="inline"] .key-value-pair {
    margin-right: 5px !important; /* 减小右侧间距 */
    margin-bottom: 5px !important; /* 减小底部间距 */
}

/* 优化inline模式下的标签宽度 */
.object-field-container[layout-mode="inline"] .key-value-pair label {
    min-width: 30px !important; /* 进一步减小标签最小宽度 */
    max-width: 30px !important; /* 添加最大宽度限制 */
    margin-right: 3px !important; /* 减小标签与输入框之间的间距 */
    font-size: 12px !important; /* 进一步减小字体大小 */
    padding: 0 !important; /* 移除内边距 */
    text-align: left !important; /* 确保文本左对齐 */
    line-height: 1.2 !important; /* 调整行高以适应小字体 */
    white-space: nowrap !important; /* 防止文本换行 */
    overflow: hidden !important; /* 隐藏溢出文本 */
    text-overflow: ellipsis !important; /* 对于过长文本显示省略号 */
}
/* 为form-group中的标签单独设置样式 */
.form-group .key-value-pair label {
    min-width: 45px !important;
    max-width: 50px !important;
    font-size: 12px !important;
    margin-right: 3px !important;
}
/* 强制设置inline模式下的输入框宽度 */
.object-field-container[layout-mode="inline"] .key-value-pair input[type="text"] {
    width: 100% !important;
    min-width: 100px !important;
    max-width: 200px !important;
}

/* 硬件类别特殊布局 - 一排3个 */
.category-section[data-category="硬件"] .category-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 20px;
    /* 使用visibility和opacity控制显示隐藏，避免与display冲突 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 硬件类别收起状态 */
.category-section[data-category="硬件"] .category-content[style*="display: none"] {
    display: grid !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* 硬件类别展开状态 */
.category-section[data-category="硬件"] .category-content[style*="display: block"] {
    display: grid !important;
    visibility: visible;
    opacity: 1;
    height: auto;
    padding: 20px;
}

/* 硬件类别中的表单组样式 */
.category-section[data-category="硬件"] .form-group {
    display: flex;
    /* flex-direction: column; */
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #f9fafb;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

/* 硬件类别表单组悬停效果 */
.category-section[data-category="硬件"] .form-group:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 硬件类别标签样式 */
.category-section[data-category="硬件"] .form-group label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    font-size: 14px;
}

/* 硬件类别输入框样式 */
.category-section[data-category="硬件"] .form-group input,
.category-section[data-category="硬件"] .form-group select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.category-section[data-category="硬件"] .form-group input:focus,
.category-section[data-category="硬件"] .form-group select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* 响应式设计 - 小屏幕时改为2列 */
@media (max-width: 768px) {
    .category-section[data-category="硬件"] .category-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 15px;
    }
}

/* 响应式设计 - 超小屏幕时改为1列 */
@media (max-width: 480px) {
    .category-section[data-category="硬件"] .category-content {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px;
    }
}

/* 确保输入容器能够收缩 */
.object-field-container[layout-mode="inline"] .key-value-pair > div:not(.remove-key-btn) {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* 对象字段中的图片组件特殊处理 */
.key-value-pair .image-upload-container {
    min-width: 200px !important;
    width: auto !important;
    flex: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* 对象字段中的图片容器 */
.key-value-pair .image-item-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100px !important;
    height: 100px !important;
    margin: 2px !important;
    flex-shrink: 0 !important;
}

/* 对象字段中的图片预览容器 */
.key-value-pair .image-preview-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 100px !important;
    min-height: 100px !important;
    border: 2px dashed #ccc !important;
    border-radius: 4px !important;
    background-color: #f9f9f9 !important;
}

/* 防止分隔符破坏布局 */
.object-field-container[layout-mode="inline"] .key-value-pair .separator {
    display: none !important;
}

/* 确保整个object容器正确布局 */
.object-field-container[layout-mode="inline"] {
    padding: 8px !important; /* 减小内边距 */
    margin-bottom: 10px !important; /* 减小底部间距 */
}
.object-field-container[layout-mode="inline"] .key-value-pair select,
.object-field-container[layout-mode="inline"] .key-value-pair input[type="text"] {
    max-width: 120px !important; /* 减小最大宽度 */
    min-width: 80px !important; /* 调整最小宽度 */
    padding: 8px 10px !important; /* 减小内边距 */
    font-size: 13px !important; /* 适当减小字体大小 */
}

